<template>
  <view class="da1">
    <!--    评测进度条-->
    <view class="da11">
      <view>测评进度</view>
      <view class="schedule">
        <view class="box" :style="{width:sun}" v-for="i in index" :key="i"></view>
      </view>
      <view v-if="cart">{{ index }}/{{ cart.length - 1 }}</view>
    </view>
    <!--    题目-->
    <view class="topic">{{ cart[index].topic }}</view>
    <!--    答案-->
    <view class="answer">
      <view class="one">单选题</view>
      <!--  选项-->
      <view :class="k1===item.son_id?'a':''" class="two" v-for="(item,key) in cart[index].options" :key="key"
            @click="add(item)">
        {{ item.title }}
      </view>
    </view>
  </view>
</template>

<script>
import {
  depressiontopics,
  depression
} from "../../utils/API/homeapi";

export default {
  props: {
    cart: {
      type: Array
    },
    title: {
      type: Number
    }
  },
  data() {
    return {
      index: 0,
      k1: null,
      show: true,
      arr: []
    };
  },
  computed: {
    sun() {
      var a = 230 / (this.cart.length - 1) + 'px'
      return a
    }
  },
  methods: {
    add(item) {
      if (this.show) {
        this.arr.push(item.son_id)
        this.k1 = item.son_id
        setTimeout(() => {
          this.index++
          this.k1 = null
          this.show = true
        }, 1000)
        this.show = false
      }
    },

  },
  watch: {
    index(val) {
      if (val === this.cart.length) {
        wx.navigateTo({
          url: `/pages/resultlist/resultlist?arr=${this.arr}&title=${this.title}`
        })
        this.index = 0;
        this.arr=[]
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.a {
  background-color: #ebf4ff !important;
}

.da1 {
  //#f0f5f9  #d6e8ff
  background: linear-gradient(to bottom, #d6e8ff, #f0f5f9);
  height: 667px;
  box-sizing: border-box;
  //padding-top: 70px;

  .da11 {
    padding: 0 15px;
    display: flex;
    justify-content: space-between;

    .schedule {
      margin-top: 5px;
      width: 230px;
      height: 10px;
      border-radius: 5px;
      display: flex;
      //#ebebeb
      background-color: #f60303;

      //last
      .box:first-child {
        border-bottom-left-radius: 5px;
        border-top-left-radius: 5px;
      }

      .box:last-child {
        border-bottom-right-radius: 5px;
        border-top-right-radius: 5px;
      }

      .box {
        width: 28.75px;
        height: 100%;
        background-color: #0d7cff;
      }
    }
  }

  .topic {
    width: 350px;
    background-color: #fff;
    border-radius: 5px;
    margin: 30px auto;
    box-sizing: border-box;
    font-size: 14px;
    padding: 10px;
  }

  .answer {
    margin: auto;
    background-color: #f3f8ff;
    width: 350px;
    //height: 300px;
    border-radius: 5px;
    padding: 10px;
    box-sizing: border-box;

    .one {
      border-left: 5px solid #0d7cff;
      height: 18px;
      line-height: 18px;
      padding-left: 5px;
    }

    .two {
      background-color: #fff;
      width: 320px;
      height: 50px;
      margin: 15px auto;
      line-height: 50px;
      font-size: 14px;
      //padding-left: 10px;
    }
  }
}
</style>
